<template>
  <a-modal
    centered
    v-model="visible"
    @cancel="cancel"
    title="入库申请"
    width="80%"
  >
    <template slot="footer">
      <a-button
        v-if="viewBtnFlag != 'pass'"
        @click="cancel"
        style="background: #d7d7d7; color: #fff; border: none"
        >关闭</a-button
      >
      <a-button
        v-if="modalFlage != 'look'"
        :loading="loading"
        type="primary"
        @click="handleOk"
        >确认</a-button
      >
    </template>
    <h3>转运标题</h3>
    <a-form-model
      class="zxmx"
      ref="addForm"
      :rules="addFormRules"
      :model="addFormData"
    >
      <a-form-model-item style="width: 100%" prop="transferTitle">
        <a-input
          v-if="modalFlage != 'look' && transferOutKeys != 3"
          v-model="addFormData.transferTitle"
          placeholder="转运标题"
          :maxLength="50"
        />
        <span v-else>{{ dto.transferTitle }}</span>
      </a-form-model-item>
      <h3 style="width: 100%">
        装箱明细
        <span style="color: #f00; font-size: 14px">带*的为必填项！</span>
      </h3>

      <a-form-model-item label="入库仓库：" prop="warehouse">
        <a-select
          ref="warehousing"
          show-search
          placeholder="请选择"
          option-filter-prop="children"
          style="width: 200px"
          :filter-option="filterOption"
          @change="changeWarehouse"
          v-model="addFormData.warehouse"
        >
          <a-select-option
            :disabled="modalFlage == 'look' || transferOutKeys == '3'"
            defaultValue="全部"
            :value="item.warehouseId"
            v-for="item in clientWareHouse"
            :key="item.warehouseId"
            :name="item.titleName"
          >
            {{ item.titleName }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="业务类型：" prop="busTypes">
        <a-select
          show-search
          placeholder="请选择"
          option-filter-prop="children"
          style="width: 200px"
          :filter-option="filterOption"
          @change="changeBusTypes"
          v-model="addFormData.busTypes"
        >
          <a-select-option
            :disabled="modalFlage == 'look' || transferOutKeys == '3'"
            defaultValue="请选择"
            :value="item.title"
            v-for="item in this.busTypesed"
            :key="item.key"
            :name="item.title"
          >
            {{ item.title }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item>
        <a-button
          v-if="modalFlage != 'look' && transferOutKeys != '3'"
          type="primary"
          @click="addBox"
        >
          新增箱子
        </a-button>
      </a-form-model-item>
      <a-form-model-item>
        <a-upload
          :beforeUpload="beforeUpload"
          style="margin-left: 15px"
          v-if="modalFlage != 'look' && transferOutKeys != '3'"
          name="file"
          :multiple="false"
          :action="baseUrl + '/by-transfer-warehousing-box/upLoad'"
          :headers="headers"
          @change="importFile"
          :fileList="fileList"
        >
          <a-button type="primary"> <a-icon type="upload" /> 导入 </a-button>
        </a-upload>
      </a-form-model-item>
      <a-form-model-item v-if="modalFlage != 'look' && transferOutKeys != '3'">
        <a
          href="./Boxmodel.xlsx"
          target="_blank"
          style="
            margin-left: 15px;
            color: #2929e0;
            border-bottom: 1px solid #2929e0;
          "
        >
          下载批量导入模板
        </a>
      </a-form-model-item>
    </a-form-model>
    <!-- 表格 -->
    <a-table
      size="small"
      bordered
      :data-source="dataSource"
      :pagination="false"
      :scroll="{ x: 1200, y: 180 }"
    >
      <!-- 货物编号 -->
      <a-table-column
        key="goodsBoxNo"
        data-index="goodsBoxNo"
        align="center"
        width="10%"
      >
        <span slot="title"> 货物编号</span>
        <template slot-scope="text, record">
          {{ record.goodsBoxNo }}
        </template>
      </a-table-column>
      <!-- 自定义编号 -->
      <a-table-column
        key="customBoxNo"
        data-index="customBoxNo"
        align="center"
        width="10%"
      >
        <span slot="title">自定义编号</span>
        <template slot-scope="text, record">
          <a-input
            :maxLength="128"
            v-if="modalFlage != 'look' && transferOutKeys != '3'"
            size="small"
            style="width: 6rem"
            v-model="record.customBoxNo"
          />
          <span v-else>{{
            record.customBoxNo === "" || record.customBoxNo === null
              ? "暂无"
              : record.customBoxNo
          }}</span>
        </template>
      </a-table-column>
      <!-- sku信息 -->
      <a-table-column
        key="boxList"
        class="columns-tab"
        data-index="boxList"
        align="center"
        width="35%"
      >
        <div slot="title" class="columns">
          <div><span style="color: red">*</span>商品名称</div>
          <div><span style="color: red">*</span>商品SKU</div>
          <div><span style="color: red">*</span>数量</div>
          <!-- <div>标签</div> -->
          <div style="border: none"></div>
        </div>
        <!-- 表格 -->
        <template slot-scope="text, record">
          <ul
            class="boxSkuList-list"
            v-for="(item, i) in record.boxSkuList"
            :key="item.key"
          >
            <li>
              {{ item.chineseName }}
              <span v-if="item.chineseName === ''"></span>
            </li>
            <li>
              <a-select
                :style="
                  item.chineseName === ''
                    ? 'border: 1px solid #f00;border-radius:5px'
                    : 'border: 1px solid #ccc;border-radius:5px'
                "
                v-model="item.sku"
                v-if="modalFlage != 'look' && transferOutKeys != '3'"
                size="small"
                show-search
                option-filter-prop="children"
                style="width: 6rem"
                :filter-option="filterOption"
                @change="(value, option) => changeSku(option, item, record)"
                placeholder="请选择SKU"
              >
                <a-select-option
                  :value="v.key"
                  v-for="v in skuList"
                  :key="v.key"
                  :sku="v.sku"
                  :name="v.chineseName"
                  :skuid="v.key"
                  :productTag="v.productTag"
                >
                  {{ v.sku }}
                </a-select-option>
              </a-select>
              <span v-else>
                {{ item.sku }}
              </span>
            </li>
            <li>
              <a-input-number
                v-if="modalFlage != 'look' && transferOutKeys != '3'"
                @change="changeBoxSkuNum(item.skuTotal, item)"
                v-model="item.skuTotal"
                size="small"
                :min="1"
                :max="100000"
                :default-value="1"
              />
              <span v-else>
                {{ item.skuTotal }}
              </span>
            </li>

            <li style="border: none" class="row-btn">
              <a-icon
                style="color: #3eae7c"
                type="plus-circle"
                theme="filled"
                @click="addSku(record)"
                v-if="
                  (record.boxSkuList.length === 1 ||
                    record.boxSkuList.length - 1 === i) &&
                  modalFlage != 'look' &&
                  transferOutKeys != '3'
                "
              />
              <a-icon
                v-if="modalFlage != 'look' && transferOutKeys != '3'"
                type="minus-circle"
                style="color: #b4b4b4"
                theme="filled"
                @click="delSku(record, item)"
              />
            </li>
          </ul>
        </template>
      </a-table-column>

      <!-- 长宽高 -->
      <a-table-column key="long" data-index="long" align="center" width="18%">
        <span slot="title">
          <span style="color: red">*</span>箱子尺寸【长*宽*高】(cm)</span
        >
        <template slot-scope="text, record" class="box-sizes">
          <a-input
            :maxLength="128"
            v-if="modalFlage != 'look' && transferOutKeys != '3'"
            @keyup="record.long = record.long.replace(/[^\d\.]/g, '')"
            size="small"
            style="width: 4rem"
            v-model="record.long"
            :style="record.long === '' ? styleBack : styleYes"
          />
          <span v-else> {{ record.long }}* </span>

          <a-input
            :maxLength="128"
            v-if="modalFlage != 'look' && transferOutKeys != '3'"
            @keyup="record.width = record.width.replace(/[^\d\.]/g, '')"
            size="small"
            style="width: 4rem"
            v-model="record.width"
            :style="record.width === '' ? styleBack : styleYes"
          />
          <span v-else> {{ record.width }}* </span>
          <a-input
            :maxLength="128"
            v-if="modalFlage != 'look' && transferOutKeys != '3'"
            @keyup="record.height = record.height.replace(/[^\d\.]/g, '')"
            size="small"
            style="width: 4rem"
            v-model="record.height"
            :style="record.height === '' ? styleBack : styleYes"
          />
          <span v-else>
            {{ record.height }}
          </span>
        </template>
      </a-table-column>
      <!-- 体积
      <a-table-column align="center" width="8%">
        <span slot="title">体积(CBM)</span>
        <template slot-scope="text, record">
          <span>
            <a-input-number
              style="width: 100%"
              :disabled="true"
              :value="(record.width * record.height * record.long) / 1000000"
              :precision="6"
            />
          </span>
        </template>
      </a-table-column> -->
      <!-- 重量 -->
      <a-table-column
        key="caratNumber1"
        data-index="caratNumber1"
        align="center"
        width="10%"
      >
        <span slot="title"> <span style="color: red">*</span>重量(kg)</span>
        <template slot-scope="text, record">
          <a-input
            :maxLength="128"
            v-if="modalFlage != 'look' && transferOutKeys != '3'"
            @keyup="record.width = record.width.replace(/[^\d\.]/g, '')"
            size="small"
            style="width: 5rem"
            v-model="record.weight"
            :style="record.weight === '' ? styleBack : styleYes"
          />
          <span v-else>
            {{ record.weight }}
          </span>
        </template>
      </a-table-column>
      <!-- 入库清点
      <a-table-column
        key="Counting"
        data-index="Counting"
        align="center"
        width="8%"
      >
        <span slot="title">入库清点</span>
         宽(cm)
        <template slot-scope="text, record">
          <a-switch
            @change="(checked) => changeCheck(checked, record)"
            :disabled="modalFlage === 'look' || transferOutKeys == '3'"
            :defaultChecked="record.isCheck == 1 ? true : false"
          />
        </template>
      </a-table-column> -->
      <!-- 装箱数量 -->
      <a-table-column
        key="boxTotal"
        data-index="boxTotal"
        align="center"
        width="10%"
      >
        <span slot="title"> <span style="color: red">*</span>箱数</span>
        <template slot-scope="text, record">
          <a-input-number
            v-if="modalFlage != 'look' && transferOutKeys != '3'"
            @change="
              record.boxTotal === null ? (record.boxTotal = 1) : record.boxTotal
            "
            v-model="record.boxTotal"
            size="small"
            :min="1"
            :default-value="1"
          />
          <span v-else>
            {{ record.boxTotal }}
          </span>
        </template>
      </a-table-column>
      <!-- 操作 -->
      <a-table-column
        v-if="modalFlage != 'look' && transferOutKeys != '3'"
        key="operation"
        data-index="operation"
        title="操作"
        width="10%"
        align="center"
      >
        <template slot-scope="text, record">
          <a-popconfirm
            v-if="dataSource.length"
            title="确定删除吗?"
            okText="确定"
            cancelText="取消"
            @confirm="() => onDelete(record, record.key)"
          >
            <a
              href="javascript:;"
              style="
                color: rgb(243, 56, 29);
                border-bottom: 1px solid rgb(243, 56, 29);
              "
              >删除</a
            >
          </a-popconfirm>
        </template>
      </a-table-column>
    </a-table>
    <a-button
      v-show="modalFlage != 'add'"
      type="primary"
      @click="getLabel"
      style="margin: 5px 0 0 15px"
      >下载外箱标</a-button
    >
    <h3 style="margin-top: 20px">入库方式</h3>
    <div class="logistics">
      <a-form-model
        ref="ruleForm"
        :model="dto"
        class="logi-form"
        :rules="rules"
      >
        <a-form-model-item label="入库方式" prop="distributionTypeId">
          <a-select
            show-search
            :disabled="modalFlage == 'look' && tabKeys != '20'"
            placeholder="未选择"
            style="width: 200px"
            option-filter-prop="children"
            :filter-option="filterOption"
            @change="changeDistributionType"
            v-model="dto.distributionTypeId"
          >
            <a-select-option
              :value="item.sysStoreHouseOutLogisticsId"
              v-for="item in this.express"
              :key="item.sysStoreHouseOutLogisticsId"
              :name="item.outLogistics"
            >
              {{ item.outLogistics }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <!-- 发出方 -->
        <a-form-model-item label="发出方：" prop="shipperId">
          <a-select
            :disabled="modalFlage == 'look' && tabKeys != '20'"
            ref="warehousing"
            show-search
            placeholder="未选择"
            option-filter-prop="children"
            style="width: 200px"
            :filter-option="filterOption"
            @change="changeSendOut"
            v-model="dto.shipperId"
          >
            <a-select-option
              :value="item.key"
              v-for="item in this.sendOuts"
              :key="item.key"
              :name="item.title"
            >
              {{ item.title }}
            </a-select-option>
          </a-select>
        </a-form-model-item>

        <!-- 发货时间 -->
        <a-form-model-item label="发货时间：" prop="startTime">
          <a-date-picker
            :disabled="modalFlage == 'look' && tabKeys != '20'"
            style="width: 200px"
            format="YYYY-MM-DD"
            @change="changeExpressTime"
            v-model="dto.startTime"
          />
        </a-form-model-item>
        <!-- 预计到仓时间： -->
        <a-form-model-item prop="whtEndTime" label="预计到仓时间：">
          <a-date-picker
            :disabled="modalFlage == 'look' && tabKeys != '20'"
            format="YYYY-MM-DD"
            v-model="dto.whtEndTime"
            style="width: 200px"
            @change="changeEndTime"
          />
        </a-form-model-item>

        <!-- 散货（箱）-快递 -->

        <!-- 发货物流名称 -->
        <a-form-model-item
          label="发货物流名称："
          prop="logisticsId"
          v-if="dto.distributionTypeId == '10319'"
        >
          <a-select
            :disabled="modalFlage == 'look' && tabKeys != '20'"
            ref="warehousing"
            show-search
            placeholder="未选择"
            option-filter-prop="children"
            style="width: 200px"
            :filter-option="filterOption"
            @change="changeLogisticsName"
            v-model="dto.logisticsId"
          >
            <a-select-option
              :value="item.key"
              v-for="item in logisSelect"
              :key="item.key"
              :name="item.title"
            >
              {{ item.title }}
            </a-select-option>
          </a-select>
        </a-form-model-item>

        <!-- 发货物流单号 -->
        <a-form-model-item
          label="发货物流单号："
          prop="expressNo"
          v-if="dto.distributionTypeId == '10319'"
        >
          <a-input
            :disabled="modalFlage == 'look' && tabKeys != '20'"
            placeholder="发货物流单号"
            :maxLength="128"
            style="width: 200px"
            v-model="dto.expressNo"
          />
        </a-form-model-item>

        <!-- 托盘-仓库安排 -->

        <!-- 托盘数量 -->
        <a-form-model-item
          class="upfile"
          prop="trayNumber"
          label="托盘数量："
          v-if="
            dto.distributionTypeId == '10320' ||
            dto.distributionTypeId == '10321'
          "
        >
          <a-input-number
            :disabled="modalFlage == 'look' && tabKeys != '20'"
            placeholder="托盘数量"
            :maxLength="128"
            style="width: 200px"
            v-model="dto.trayNumber"
          />
          <span style="color: #bfbfbf"
            >注：若暂无托盘数量，请填写预估数量，实际将以仓库提/收货托盘数量为准。</span
          >
        </a-form-model-item>

        <a-form-model-item
          label="货运柜号："
          v-if="
            dto.distributionTypeId == '10322' ||
            dto.distributionTypeId == '10323'
          "
          prop="cargotankNumber"
        >
          <a-input
            :disabled="modalFlage == 'look' && tabKeys != '20'"
            placeholder="货运柜号"
            :maxLength="128"
            style="width: 200px"
            v-model="dto.cargotankNumber"
          />
        </a-form-model-item>
        <a-form-model-item
          label="货柜型号："
          v-if="
            dto.distributionTypeId == '10322' ||
            dto.distributionTypeId == '10323'
          "
          prop="cargotankModel"
        >
          <a-input
            :disabled="modalFlage == 'look' && tabKeys != '20'"
            placeholder="货柜型号"
            :maxLength="128"
            style="width: 200px"
            v-model="dto.cargotankModel"
          />
        </a-form-model-item>
        <a-form-model-item
          label="是否带托盘："
          v-if="
            dto.distributionTypeId == '10322' ||
            dto.distributionTypeId == '10323'
          "
          prop="isTora"
        >
          <a-radio-group
            v-model="dto.isTora"
            :disabled="modalFlage == 'look' && tabKeys != '20'"
          >
            <a-radio :value="'1'"> 是 </a-radio>
            <a-radio :value="'0'"> 否 </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item
          label="HBL："
          v-if="
            dto.distributionTypeId == '10322' ||
            dto.distributionTypeId == '10323'
          "
          prop="hbl"
        >
          <a-input
            :disabled="modalFlage == 'look' && tabKeys != '20'"
            placeholder="HBL"
            :maxLength="128"
            style="width: 200px"
            v-model="dto.hbl"
          />
        </a-form-model-item>
        <a-form-model-item
          label="MBL："
          v-if="
            dto.distributionTypeId == '10322' ||
            dto.distributionTypeId == '10323'
          "
          prop="mbl"
        >
          <a-input
            :disabled="modalFlage == 'look' && tabKeys != '20'"
            placeholder="MBL"
            :maxLength="128"
            style="width: 200px"
            v-model="dto.mbl"
          />
        </a-form-model-item>

        <!-- 要求还柜时间 -->
        <a-form-model-item
          label="要求还柜时间："
          prop="cabinetTime"
          v-if="
            dto.distributionTypeId == '10322' ||
            dto.distributionTypeId == '10323'
          "
        >
          <a-date-picker
            :disabled="modalFlage == 'look' && tabKeys != '20'"
            style="width: 200px"
            format="YYYY-MM-DD"
            @change="changeCabinetTime"
            v-model="dto.cabinetTime"
          />
        </a-form-model-item>

        <!-- 文件上传 -->
        <a-form-model-item
          class="upfile"
          prop="trayNumber"
          label="相关文件："
          v-if="
            dto.distributionTypeId == '10320' ||
            dto.distributionTypeId == '10322'
          "
        >
          <span
            v-if="dto.sinceFile != '' && dto.sinceFile != null"
            style="margin-right: 10px"
          >
            <a
              style="
                line-height: 32px;
                color: #2929e0;
                text-decoration: underline;
              "
              :href="dto.sinceFile"
              target="_blank"
              >查看已上传文件</a
            >
            <a-icon
              v-if="modalFlage != 'look'"
              @click="delFlie"
              style="cursor: pointer; color: #ccc; margin-left: 5px"
              type="delete"
              theme="filled"
            />
          </span>
          <a-upload
            v-if="modalFlage != 'look'"
            :beforeUpload="beforeUploads"
            name="file"
            :action="baseUrl + '/by-file/uploadFile'"
            :headers="headers"
            @change="handle"
            :showUploadList="false"
            :file-list="logiFileList"
          >
            <a-button> <a-icon type="upload" /> 上传文件 </a-button>
            <span style="color: #f00; margin-left: 10px"
              >注：
              仓库安排自提需提供相关文件(只能上传PDF、JPEG/PNG格式文件！)</span
            >
          </a-upload>
        </a-form-model-item>
      </a-form-model>
    </div>
    <!-- 备注 -->
    <h3 style="margin-top: 20px">备注</h3>
    <a-textarea
      v-if="modalFlage != 'look'"
      :maxLength="256"
      style="width: 100%"
      v-model="dto.remarks"
      :auto-size="{ minRows: 2 }"
    />
    <span v-else>{{ dto.remarks }}</span>
    <ServiceModalReap />
  </a-modal>
</template>

<script>
import { setWare_searchWareHouse } from "@/apis/system/setManage/setWarehouse";
import { downTransLabel } from "@/apis/common";
import req from "@/utils/req";
import baseUrl from "@/utils/baseUrl";
import { treeTagDictionary, sku_select, removefile } from "@/apis/common";
import {
  box_no,
  transferIn_save,
  getByApplyId,
  updateApplyInfo,
  TransferIn_update,
} from "@/apis/clientSide/OrderManage/TransferIn";
import ServiceModalReap from "@/components/serviceModal/ServiceModalReap";
import { mapState } from "vuex";
export default {
  components: {
    ServiceModalReap,
  },
  computed: {
    ...mapState(["clientWareHouse"]),
  },
  props: [
    "getTransferInTableList",
    "getStateCount",
    "tabKeys",
    "transferOutKeys",
  ],
  created() {
    this.getSkuSelection();
    this.getOutSelection();
  },
  data() {
    return {
      //发货方
      logisSelect: [],
      //发出方下拉
      sendOuts: [],
      //入库方式下拉
      express: [],
      busTypesed: [
        { title: "普通转运", value: "普通转运", key: 1 },
        { title: "其他仓库转运", value: "其他仓库转运", key: 2 },
      ],
      addFormData: {
        warehouse: undefined,
        busTypes: undefined,
      },
      //   定义验证规则
      addFormRules: {
        warehouse: [
          { message: "仓库需选择！", trigger: "blur", required: true },
        ],
        busTypes: [
          { message: "业务类型需选择！", trigger: "blur", required: true },
        ],
        transferTitle: [
          { message: "转运标题需填写！", trigger: "blur", required: true },
        ],
      },
      //   定义验证规则
      rules: {
        distributionTypeId: [
          {
            required: false,
            message: "发货物流名称为必选项",
            trigger: "blur",
          },
        ],
        shipperId: [
          {
            required: false,
            message: "发出方为必选项",
            trigger: "blur",
          },
        ],
        logisticsId: [
          {
            required: false,
            message: "入库方式为必选项",
            trigger: "blur",
          },
        ],
        expressNo: [
          {
            required: false,
            message: "发货物流单为必选项",
            trigger: "blur",
          },
        ],
        startTime: [
          {
            required: false,
            message: "发货时间为必选项",
            trigger: "change",
          },
        ],
        whtEndTime: [
          {
            required: false,
            message: "预计到仓时间为必选项",
            trigger: "change",
          },
        ],
        cargotankModel: [
          {
            required: false,
            message: "货柜型号需必填",
            trigger: "blur",
          },
        ],
        cargotankNumber: [
          {
            required: false,
            message: "货运柜号需必填",
            trigger: "blur",
          },
        ],
        hbl: [
          {
            required: false,
            message: "hbl需必填",
            trigger: "blur",
          },
        ],
        mbl: [
          {
            required: false,
            message: "mbl需必填",
            trigger: "blur",
          },
        ],
        cabinetTime: [
          {
            required: false,
            message: "要求还柜时间需必选",
            trigger: "change",
          },
        ],
      },
      viewBtnFlag: "",
      //模态框标杆
      modalFlage: "",
      loading: false,
      fileList: [],
      baseUrl,
      passFlag: false,
      styleBack: {
        border: "1px solid #f00",
        borderRadius: "5px",
      },
      styleYes: {
        border: "1px solid #ccc",
        borderRadius: "5px",
      },
      //sku列表
      skuList: [],
      //文件时上传请求头
      headers: {
        authorization: "authorization-text",
        token: sessionStorage.getItem("tk"),
      },
      // 模态框显示
      visible: false,
      //表格数据
      dataSource: [],
      boxlistObj: {
        chineseName: "",
        sku: "",
        skuId: "",
        skuTotal: "",
        uiIsDelete: null,
      },
      dto: {
        boxList: [],
        logisticsType: "", //物流类型
        transferTitle: "", //转运表标题
        businessType: "",
        isTora: "1", //是否带托
        customNo: "",
        distributionType: "",
        //要求还柜时间
        cabinetTime: null,
        hbl: "",
        hullNumber: "",
        logisticsId: undefined,
        logisticsName: "",
        mbl: "",
        shipper: "",
        shipperId: undefined,
        distributionTypeId: undefined,
        remark: "",
        startTime: null,
        whtEndTime: null,
        trayNumber: "",
        warehousingId: undefined,
        warehousingName: "",
        sinceFile: "",
        countingType: "",
        countingTypeId: "",
      },
    };
  },
  mounted() {
    //新增打开模态框
    this.$bus.$off("showTransferInAddModal");
    this.$bus.$on("showTransferInAddModal", () => {
      this.fileList = [];
      for (let key in this.dto) {
        this.dto[key] = "";
      }
      this.dto.boxList = {
        goods: "",
        weight: "",
        height: "",
        isCheck: "",
        Counting: false,
        long: "",
        width: "",
        uiIsDelete: null,
      };
      this.dto.logisticsId = "";
      this.dto.logisticsName = "";
      this.dto.warehousingId = "";
      this.dataSource = [];
      this.addFormData.warehouse = undefined;
      this.addFormData.busTypes = undefined;
      this.modalFlage = "add";
      this.visible = true;
    });
    //编辑、详情
    this.$bus.$off("TransferInRowData");
    this.$bus.$on("TransferInRowData", async (rowData, flag, viewBtnFlag) => {
      this.viewBtnFlag = viewBtnFlag;
      let { code, responseBody } = await getByApplyId(
        rowData.transferWarehousingApplyId
      );
      if (code == "200") {
        this.dto = responseBody;
        this.modalFlage = flag;
        this.visible = true;
      }
    });
  },
  methods: {
    // 入库方式改
    changeDistributionType(value, option) {
      this.dto.distributionTypeId = value;
      this.dto.distributionType = option.data.attrs.name;
    },
    // 快递方式改
    changeLogisticsName(value, option) {
      this.dto.logisticsId = value;
      this.dto.logisticsName = option.data.attrs.name;
    },
    // 发出方改变
    changeSendOut(value, option) {
      this.dto.shipperId = value;
      this.dto.shipper = option.data.attrs.name;
    },
    //选择业务类型
    changeBusTypes(e) {
      if (e == "FBA转运") {
        this.dto.businessType = 0;
      } else if (e == "普通转运") {
        this.dto.businessType = 1;
      } else if (e == "其他仓库转运") {
        this.dto.businessType = 2;
      }
    },
    //下载外箱标
    async getLabel() {
      let responseBody = await downTransLabel(
        this.dto.transferWarehousingApplyId
      );
      if (responseBody) {
        req.exportPDF(this.dto.transferNo, responseBody);
      }
    },
    /*是否清点
    // changeCheck(checked, record) {
    //   record.Counting = checked;
    //   if (record.Counting == false) {
    //     record.isCheck = 0;
    //   } else {
    //     record.isCheck = 1;
    //   }
    // },
    */
    //改变箱子里面sku的数量
    changeBoxSkuNum(value, record) {
      if (record.byTransferWarehousingBoxSkuId) {
        record.uiIsDelete = 2;
      } else {
        record.uiIsDelete = null;
      }
      value === null ? (value = 1) : value;
    },
    //关闭模态框
    cancel() {
      this.$refs.addForm.resetFields();
      for (let key in this.dto) {
        this.dto[key] = "";
      }
      this.dto.boxList = {
        goods: "",
        weight: "",
        height: "",
        isCheck: "",
        Counting: false,
        long: "",
        width: "",
        uiIsDelete: null,
      };
      this.dto.logisticsId = "";
      this.dto.logisticsName = "";
      this.dto.warehousingId = "";
      this.dataSource = [];
      this.fileList = [];
      this.addFormData.warehouse = undefined;
      this.addFormData.busTypes = undefined;
      this.modalFlage = "add";
      this.viewBtnFlag = "";
      this.visible = false;
    },
    // 限制上传文件
    beforeUpload(file) {
      return new Promise((resolve, reject) => {
        this.files = file;
        const extension = file.name.split(".")[1] === "xls";
        const extension2 = file.name.split(".")[1] === "xlsx";
        if (!extension && !extension2) {
          this.$message.error("上传模板只能是 xls、xlsx格式!");
          return reject(false);
        }
        return resolve(true);
      });
    },
    // 限制上传文件
    beforeUploads(file) {
      return new Promise((resolve, reject) => {
        this.files = file;
        const isLt6M = file.size / 1024 / 1024 < 6;
        const pdf = file.type === "application/pdf";
        const img =
          file.type === "image/jpeg" ||
          file.type === "image/png" ||
          file.type === "image/jpg";
        if (!pdf && !img) {
          this.$message.error("上传文件只能是 png、jpeg、jpg、PDF!");
          return reject(false);
        }
        if (!isLt6M) {
          this.$message.error("文件大小限制小于6MB!");
          return reject(false);
        }
        return resolve(true);
      });
    },
    //导入文件
    importFile(info) {
      this.fileList = info.fileList;
      if (info.fileList && info.fileList.length >= 2) {
        this.fileList = info.fileList;
        info.fileList = info.fileList.splice(0, 1);
        this.$message.warning("只能上传一个文件！");
      }
      if (info.file.status === "done") {
        if (info.file.response.code === "200") {
          this.dataSource = info.file.response.responseBody.boxList;
          this.dataSource.forEach((item, index) => {
            item.key = index + 1;
          });
          this.$message.success(`${info.file.name} 上传成功！`);
        } else if (info.file.response.code === "20024") {
          this.$message.error(info.file.response.message);
        } else if (info.file.response.code === "20026") {
          this.$message.error(info.file.response.message);
        }
      } else if (info.file.status === "error") {
        this.$message.error(`${info.file.name} 上传失败，请用上传模板上传哦.`);
      }
    },
    // 仓库改变
    changeWarehouse(value, option) {
      this.dto.warehousingId = value;
      this.dto.warehousingName = option.data.attrs.name;
      if (value) {
        this.getSelection(value);
      }
    },
    //SKU改变
    changeSku(option, item, record) {
      if (this.modalFlage == "add") {
        let flag = true;
        record.boxSkuList.forEach((v) => {
          if (option.data.attrs.sku === v.sku) {
            flag = false;
            item.sku = "";
            this.$message.error("同一箱子只能不能添加多个同名SKU！");
          }
        });
        if (flag) {
          item.chineseName = option.data.attrs.name;
          item.skuId = option.data.attrs.skuid;
          item.sku = option.data.attrs.sku;
          item.productTag = option.data.attrs.productTag;
        }
      } else if (this.modalFlage == "edit") {
        let flag = true;
        record.boxSkuList.forEach((v) => {
          if (option.data.attrs.sku === v.sku) {
            flag = false;
            item.sku = "";
            this.$message.error("同一箱子只能不能添加多个同名SKU！");
          }
        });
        if (flag) {
          item.chineseName = option.data.attrs.name;
          item.skuId = option.data.attrs.skuid;
          item.sku = option.data.attrs.sku;
          item.productTag = option.data.attrs.productTag;
          item.uiIsDelete = 2;
        }
      }
    },
    //新增每一行SKU
    addSku(record) {
      let rowDataPto = JSON.parse(JSON.stringify(record.boxSkuList));
      this.boxlistObj.key = Math.random();
      this.boxlistObj.skuId = "";
      this.boxlistObj.chineseName = "";
      this.boxlistObj.sku = "请选择SKU";
      this.boxlistObj.skuTotal = 1;
      this.boxlistObj.uiIsDelete = null;
      rowDataPto.push(Object.assign({}, this.boxlistObj));
      if (this.modalFlage == "add") {
        this.dataSource.forEach((item, index) => {
          item.uiIsDelete = null;
          if (record.key === item.key) {
            this.dataSource[index].boxSkuList = rowDataPto;
          }
        });
      } else if (this.modalFlage == "edit") {
        //点击新增的时候标识修改过该数据
        this.dataSource.forEach((item, index) => {
          item.uiIsDelete = null;
          if (
            record.transferWarehousingBoxId === item.transferWarehousingBoxId
          ) {
            this.dataSource[index].boxSkuList = rowDataPto;
          }
        });
      }
    },
    //删除每一行SKU
    delSku(record, item) {
      if (record.boxSkuList.length == 1) {
        this.$message.error("每个箱子最少存放一个SKU！");
        return false;
      }
      if (this.modalFlage == "add") {
        record.boxSkuList.forEach((v, i) => {
          if (v.key === item.key) {
            record.boxSkuList.splice(i, 1);
          }
        });
      } else if (this.modalFlage == "edit") {
        record.boxSkuList.forEach((v, i) => {
          if (v.sku === item.sku) {
            record.boxSkuList.splice(i, 1);
          }
        });
      }
    },
    //删除箱子每一行
    async onDelete(record) {
      //如果是新增的话直接删除
      if (this.modalFlage == "add") {
        this.dataSource.forEach((item, i) => {
          if (item.key == record.key) {
            this.dataSource.splice(i, 1);
          }
          this.dataSource[i].goodsBoxNo = i + 1;
        });
        //如果是编辑的话就需要把传参和显示的参数分开 做标识
      } else if (this.modalFlage == "edit") {
        this.dataSource.forEach((item, i) => {
          if (item.goodsBoxNo == record.goodsBoxNo) {
            this.dataSource.splice(i, 1);
          }
          this.dataSource[i].goodsBoxNo = i + 1;
        });
      }
    },
    //新增箱子
    async addBox() {
      let { code, responseBody } = await box_no();
      if (code === "200") {
        let boxList = {
          boxSkuList: [],
          goodsBoxNo: "",
          customBoxNo: "",
          height: "",
          boxTotal: "",
          long: "",
          weight: "",
          width: "",
          uiIsDelete: null,
          isCheck: "",
          Counting: false,
        };
        boxList.goodsBoxNo = this.dataSource.length * 1 + 1;
        boxList.key = responseBody;
        let obj = Object.assign({}, this.boxlistObj);
        obj.sku = "请选择SKU";
        obj.key = this.dataSource.length;
        let arr = JSON.parse(JSON.stringify(boxList.boxSkuList));
        arr.push(obj);
        boxList.boxSkuList = arr;
        this.dataSource.push(boxList);
      }
    },
    //新建入库确认
    handleOk() {
      this.loading = true;
      this.dataSource.forEach((item) => {
        if (
          item.height != "" &&
          item.long != "" &&
          item.width != "" &&
          item.weight != ""
        ) {
          this.passFlag = true;
        } else {
          this.passFlag = false;
          this.loading = false;
          return false;
        }
        if (item.boxTotal >= 1 && item.boxTotal != undefined) {
          this.passFlag = true;
        } else {
          this.passFlag = false;
          this.loading = false;
          return false;
        }
        item.boxSkuList.forEach((v) => {
          if (v.chineseName != "") {
            this.passFlag = true;
          } else {
            this.passFlag = false;
            return false;
          }
        });
      });
      if (this.passFlag) {
        this.$refs.addForm.validate((valid) => {
          if (valid) {
            if (this.modalFlage === "add") {
              setTimeout(async () => {
                this.dto.boxList = this.dataSource;
                let { code } = await transferIn_save(this.dto);
                if (code === "10000") {
                  this.getTransferInTableList();
                  this.getStateCount(0);
                  this.getStateCount(1);
                  this.getStateCount(2);
                  this.getStateCount(3);
                  this.getStateCount(4);
                  this.getStateCount(5);
                  this.loading = false;
                  this.visible = false;
                }
                this.loading = false;
              }, 1000);
            } else if (this.modalFlage === "edit") {
              if (this.viewBtnFlag === "待发头程") {
                if (this.dto.logisticsId === "") {
                  this.$message.error("请完善头程信息！");
                  this.loading = false;
                  return false;
                } else if (this.dto.logisticsId != "") {
                  setTimeout(async () => {
                    let { code } = await TransferIn_update(
                      this.dto.transferWarehousingApplyId,
                      this.dto
                    );
                    if (code === "10000") {
                      this.getTransferInTableList();
                      this.getStateCount(0);
                      this.getStateCount(1);
                      this.getStateCount(2);
                      this.getStateCount(3);
                      this.getStateCount(4);
                      this.getStateCount(5);
                      this.loading = false;
                      this.visible = false;
                    }
                  }, 1000);
                }
              } else {
                setTimeout(async () => {
                  this.dto.boxList = this.dataSource;
                  let { code } = await updateApplyInfo(
                    this.dto.transferWarehousingApplyId,
                    this.dto
                  );
                  if (code === "10000") {
                    this.getTransferInTableList();
                    this.getStateCount(0);
                    this.getStateCount(1);
                    this.getStateCount(2);
                    this.getStateCount(3);
                    this.getStateCount(4);
                    this.getStateCount(5);
                    this.loading = false;
                    this.visible = false;
                  }
                }, 1000);
              }
            }
          } else {
            this.loading = false;
            return false;
          }
        });
      } else {
        this.$message.error("请检查必填项！");
      }
    },
    // 下拉框过滤
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    //文件上传
    async handle(info, record) {
      if (info.file.status !== "uploading") {
        if (info.fileList.length >= 2) {
          // this.fileList = info.fileList.concat();
          info.fileList = info.fileList.splice(0, 1);
          this.$message.warning("只能上传一个文件！");
        }
      }
      if (info.file.status === "done") {
        if (info.file.response.code === "200") {
          record.uploadFile.url = info.file.response.responseBody[0];
          record.uploadFile.fileText = info.file.name;
        }
        this.$message.success(`${info.file.name} 上传成功！`);
      } else if (info.file.status === "error") {
        this.$message.error(`${info.file.name} 上传失败！请重新试试！`);
      }

      if (info.file.status === "removed") {
        let { code } = await removefile(info.file.response.responseBody);
        if (code === "10000") {
          record.uploadFile.url = "";
          record.uploadFile.fileText = "";
        }
      }
    },
    //发货日期日期改变
    changeExpressTime(date, dateString) {
      this.dto.startTime = dateString;
    },
    //要求还柜时间
    changeCabinetTime(date, dateString) {
      this.dto.cabinetTime = dateString;
    },
    //预计到仓日期改变
    changeEndTime(date, dateString) {
      this.dto.whtEndTime = dateString;
    },
    //获取发出方下拉框选项
    async getOutSelection() {
      let res = await treeTagDictionary({
        tagType: 16,
      });
      if (res.code === "200") {
        this.sendOuts = res.responseBody;
      }
    },
    //获取sku下拉选项
    async getSkuSelection() {
      let value = await sku_select();
      if (value.code === "200") {
        this.skuList = value.responseBody;
      }
    },
    //获取入库方式下拉选项
    async getSelection(id) {
      let res = await setWare_searchWareHouse(id);
      if (res.code === "200") {
        this.express = res.responseBody.outLogisticsList;
      }
    },
    //获取发货物流名称下拉选项
    async getlogiSelection() {
      let res = await treeTagDictionary({
        tagType: 4,
      });
      if (res.code === "200") {
        this.logisSelect = res.responseBody;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.zxmx {
  display: flex;
  margin-bottom: 15px;
  align-content: center;
  flex-wrap: wrap;
  /deep/.ant-form-item:first-child {
    .ant-form-item-control-wrapper {
      width: 100%;
    }
  }
  > div {
    display: flex;
    margin-right: 15px;
  }
  /deep/.fast {
    .ant-form-item-children {
      display: flex;
      align-items: center;
      .ant-checkbox-wrapper {
        width: 120px;
      }
      .ant-input {
        width: 80%;
      }
    }
  }
}
.boxSkuList-list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  li {
    flex: 1;
    border: 1px solid #ccc;
    padding: 3px 0;
    // line-height: 2rem;
  }
}
/deep/.ant-modal-footer {
  text-align: center !important;
  button {
    margin: 0 50px;
  }
}
.box-handle {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #e8e8e8;
  border-bottom: 0;
  padding: 5px 10px;
  .handle-right {
    padding-left: 10px;
    border-left: 1px solid #e8e8e8;
    width: 70%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.wei-logi {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .ant-form-item {
    display: flex;
    margin-right: 20px;
    flex: 1;
  }
  /deep/.fastaddr {
    flex: 1;
    .ant-form-item-control-wrapper {
      width: 100%;
    }
    .ant-form-item-label {
      padding-right: 20px !important;
    }
    input {
      width: 80%;
    }
  }
}
/deep/.ant-table-header-column {
  width: 100% !important;
}
.ant-form-inline .ant-form-item-with-help {
  margin: 0;
}
/deep/.columns-tab {
  width: 10% !important;
  .columns {
    width: 82%;
    display: flex;
    border: 1px solid #e8e8e8;
    div {
      border-right: 1px solid #e8e8e8;
      text-align: center;
    }
    > div:last-child {
      border: none;
    }
  }
}

.row-btn {
  font-size: 18px;
  i {
    margin: 0 5px;
    cursor: pointer;
  }
}
/deep/.box-sizes {
  width: 22px;
  display: flex;
  input {
    width: 50px;
    flex: 1;
  }
}
.pto-list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  li {
    border: 1px solid #e8e8e8;
    padding: 3px 0;
  }
  li:nth-child(2) {
    border-left: none;
    border-right: none;
  }
  li:nth-child(3) {
    border-right: none;
  }
}
.logi-form {
  display: flex;
  flex-wrap: wrap;
  .ant-form-item {
    display: flex;
    width: 25%;
  }
  .upfile {
    width: 50%;
  }
}
</style>
